<template>
    <div id="applyExpenseContainer">
        <div id="headTitle">申请班费</div>
        <div id="tableHead">
            <el-input id="searchTextInput" v-model="searchUser" placeholder="请输入要搜索的用户"/>
            <el-input id="searchTextInput" v-model="searchReason" placeholder="请输入要搜索的申请原因"/>
            <el-button type="primary" @click="loadData">搜索</el-button>
            <el-button type="primary" @click="showForm">申请</el-button>
            <el-dialog
                    id="applyExpenseForm"
                    v-model="formVisible"
                    title="申请班费"
                    width="30%"
            >
                <el-form ref="applyExpenseForm" :model="applyExpense" :rules="applyExpenseRules" status-icon>
                    <div>申请金额（元）</div>
                    <el-form-item prop="applyAmount">
                        <el-input id="input" v-model="applyExpense.applyAmount" placeholder="请输入申请金额"/>
                    </el-form-item>
                    <div>申请原因</div>
                    <el-form-item prop="applyReason">
                        <el-input v-model="applyExpense.applyReason"
                                  placeholder="请输入申请原因"
                                  type="textarea"
                                  :autosize="{ minRows: 15, maxRows: 15 }"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="button" type="primary" @click="apply">申 请</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
        <div id="table">
            <el-table max-height="700" :data="classApplyRecord" border>
                <el-table-column type="expand">
                    <template #default="props">
                        <div class="tableRowContainer">
                            <p class="tableRow">申请用户：{{ props.row.applyUserName }}</p>
                            <p class="tableRow">申请金额：{{ props.row.applyAmount * (-1) }}元</p>
                            <p class="tableRow">申请原因：{{ props.row.applyReason }}</p>
                            <p class="tableRow">申请状态：
                                <span v-if="props.row.status === '审核中'" style="color:#409eff">{{
                                    props.row.status
                                    }}</span>
                                <span v-if="props.row.status === '不同意'" style="color:#f56c6c">{{
                                    props.row.status
                                    }}</span>
                                <span v-if="props.row.status === '同意'" style="color:#67c23a">{{
                                    props.row.status
                                    }}</span>
                                <span v-if="props.row.status === '撤销'" style="color:#909399">{{
                                    props.row.status
                                    }}</span>
                            </p>
                            <p class="tableRow">申请时间：{{ props.row.applyTime }}</p>
                            <p class="tableRow">审核人员：{{ props.row.auditUserName }}</p>
                            <p class="tableRow">审核时间：{{ props.row.auditTime }}</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="applyUserName" label="申请用户" show-overflow-tooltip align="center"
                                 width="100"/>
                <el-table-column prop="applyAmount" label="申请金额" show-overflow-tooltip align="center">
                    <template #default="scope">{{ scope.row.applyAmount * (-1) }}元</template>
                </el-table-column>
                <el-table-column prop="status" label="状态" show-overflow-tooltip align="center" width="200">
                    <template #default="scope">
                        <span v-if="scope.row.status === '审核中'" style="color:#409eff">{{ scope.row.status }}</span>
                        <span v-if="scope.row.status === '不同意'" style="color:#f56c6c">{{ scope.row.status }}</span>
                        <span v-if="scope.row.status === '同意'" style="color:#67c23a">{{ scope.row.status }}</span>
                        <span v-if="scope.row.status === '撤销'" style="color:#909399">{{ scope.row.status }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="applyTime" label="申请时间" show-overflow-tooltip align="center" width="200"/>
                <el-table-column prop="auditTime" label="审核时间" show-overflow-tooltip align="center" width="200"/>
                <el-table-column label="操作" width="150" align="center">
                    <template #default="scope">
                        <el-button type="primary" v-if="scope.row.status == '审核中'" plain
                                   @click="cancelApply(scope.row.expApplyID)">撤销申请
                        </el-button>
                        <el-button type="info" v-if="scope.row.status == '撤销'" plain :disabled="true">已撤销
                        </el-button>
                        <el-button type="danger" v-if="scope.row.status == '不同意'" plain :disabled="true">未通过
                        </el-button>
                        <el-button type="success" v-if="scope.row.status == '同意'" plain :disabled="true">已通过
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="pagination">
            <el-pagination
                    v-model:current-page="pageNumber"
                    v-model:page-size="pageSize"
                    :page-sizes="[5, 10, 20, 50]"
                    :small=false
                    :disabled=false
                    :background=false
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="classApplyRecordTotal"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script>
//css
import "../assets/ApplyExpense.css";
//请求
import request from '@/utils/requset.js';
//顶部提示信息
import prompt from '@/utils/prompt.js'
//路由跳转
import router from "@/router";

export default {
    name: 'applyExpense',
    data() {
        return {
            //缴费项目数据
            classApplyRecord: [],
            pageNumber: 1,
            pageSize: 5,
            classApplyRecordTotal: 0,
            searchUser: "",
            searchReason: "",
            formVisible: false,
            applyExpense: {
                token: '',
                applyAmount: 0,
                applyReason: '',
            },
            applyExpenseRules: {
                applyAmount: [
                    {required: true, message: '请输入申请金额', trigger: 'blur'},
                    {min: 1, max: 20, message: '长度为1-5位', trigger: 'blur'},
                ],
                applyReason: [
                    {required: true, message: '请输入申请原因', trigger: 'blur'},
                    {min: 1, max: 1000, message: '最多输入1000字！', trigger: 'blur'},
                ]
            },
        }
    },
    created() {
        if (this.isIntoClass()) {
            this.loadData();
        }
    },
    methods: {
        //申请班费表单弹窗
        showForm() {
            this.formVisible = !this.formVisible;
        },
        //申请班费
        apply() {
            //表单校验
            this.$refs["applyExpenseForm"].validate(valid => {
                //校验通过
                if (valid) {
                    let token = localStorage.getItem("token") ? localStorage.getItem("token") : "";
                    this.applyExpense.token = token;
                    request.post(
                        "/expenseApply/apply",
                        this.applyExpense
                    ).then(result => {
                        prompt(result.message, result.type);
                        if (result.code === "200") {
                            //更新数据
                            this.loadData();
                            //关闭窗口
                            this.showForm();
                            //清除表单
                            this.$refs["applyExpenseForm"].resetFields();
                            return;
                        }
                    });
                    return;
                }
                //校验未通过
                prompt("请检查缴费项目信息是否正确！", "error");
            });
        },
        //是否加入班级
        isIntoClass() {
            let classID = localStorage.getItem("userInfo") ? JSON.parse(localStorage.getItem("userInfo")).classID : 0;
            if (classID < 1) {
                prompt("还未加入班级！", "error");
                router.push({path: "home"});
                return false;
            }
            return true;
        },
        //加载数据
        loadData() {
            let token = localStorage.getItem("token") ? localStorage.getItem("token") : "";
            if (token === "") {
                prompt("还未登录！", "error");
                router.push({path: "/login"});
                return;
            }
            request.get("/expenseApply/info", {
                params: {
                    token: token,
                    pageNumber: this.pageNumber,
                    pageSize: this.pageSize,
                    searchUser: this.searchUser,
                    searchReason: this.searchReason,
                }
            }).then(result => {
                //请求失败
                if (result.code !== "200") {
                    prompt(result.message, result.type);
                }
                //请求成功
                this.classApplyRecord = result.data.classApplyRecord;
                this.classApplyRecordTotal = result.data.classApplyRecordTotal;
            })
        },
        //撤销申请
        cancelApply(expApplyID) {
            request.get("/expenseApply/cancelApply", {
                params: {
                    expApplyID: expApplyID,
                }
            }).then(result => {
                prompt(result.message, result.type);
                //撤销成功
                if (result.code === "200") {
                    //刷新数据
                    this.loadData();
                }
            });
        },
        //分页-单页数量
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.loadData();
        },
        //分页-页码
        handleCurrentChange(pageNumber) {
            this.pageNumber = pageNumber;
            this.loadData();
        },
    }
}
</script>
<style>
#applyExpenseForm #input {
    width: 509px;
}
</style>